<div class="case-view">
  <div [class.hidden]="model.id" class="module-tips">
    <div *ngIf="model.childrenCount">
      <div class="case-data">
        <div class="row header">用例类型：</div>
        <div *ngIf="model.childrenCount.functional" class="row">
          <div class="col-sm-2">功能</div>
          <div class="col-sm-10">{{model.childrenCount.functional}}个</div>
        </div>
        <div *ngIf="model.childrenCount.performance" class="row">
          <div class="col-sm-2">性能</div>
          <div class="col-sm-10">{{model.childrenCount.performance}}个</div>
        </div>
        <div *ngIf="model.childrenCount.security" class="row">
          <div class="col-sm-2">安全</div>
          <div class="col-sm-10">{{model.childrenCount.security}}个</div>
        </div>
        <div *ngIf="model.childrenCount.others" class="row">
          <div class="col-sm-2">其他</div>
          <div class="col-sm-10">{{model.childrenCount.others}}个</div>
        </div>
      </div>

      <div class="case-data">
        <div class="row header">用例评审：</div>
        <div class="row">
          <div class="col-sm-2">未评审</div>
          <div class="col-sm-10">{{model.childrenCount.notReview}}个</div>
        </div>
        <div class="row">
          <div class="col-sm-2">通过</div>
          <div class="col-sm-10 pass">{{model.childrenCount.reviewPass}}个</div>
        </div>
        <div class="row">
          <div class="col-sm-2">失败</div>
          <div class="col-sm-10 fail">{{model.childrenCount.reviewFail}}个</div>
        </div>
      </div>
    </div>

    <div class="export">
      <span (click)="exportAll()" class="link">导出用例</span>
    </div>
  </div>

  <div [class.hidden]="!model.id" class="my-validate-form small-label">
    <div class="form-group row">

    </div>

    <div class="form-group row">
      <label class="col-sm-3 col-form-label" style="user-select: text;">TC-{{model.id}}</label>
      <label class="col-sm-9 col-form-label text">
        {{model.name}}
      </label>
    </div>

    <div class="form-group row">
      <label class="col-sm-3 col-form-label"></label>
      <div class="col-sm-9">
        <div class="tabs-container light">
          <div class="tabs">
            <ngb-tabset (tabChange)="tabChange($event)">
              <ngb-tab id="content">
                <ng-template ngbTabTitle>测试步骤</ng-template>
                <ng-template ngbTabContent></ng-template>
              </ngb-tab>
              <ngb-tab id="summary">
                <ng-template ngbTabTitle>用例信息</ng-template>
                <ng-template ngbTabContent></ng-template>
              </ngb-tab>
              <ngb-tab id="history">
                <ng-template ngbTabTitle>修订历史</ng-template>
                <ng-template ngbTabContent></ng-template>
              </ngb-tab>
            </ngb-tabset>
          </div>
        </div>
      </div>
    </div>

    <div [class.hidden]="tab != 'content'" class="tab-steps form-group row">
      <div [class.hidden]="'richText'!=model.contentType" class="col-sm-12">
          <pre style="display: inline;" [innerHTML]="model.content"></pre>
      </div>

      <div [class.hidden]="'steps'!=model.contentType" class="col-sm-12">
        <steps-table [settings]="settings" [source]="model.steps"></steps-table>
      </div>
    </div>

    <div [class.hidden]="tab != 'summary'" class="tab-summary">
      <div class="form-group row">
        <label class="col-sm-3 col-form-label"><span>测试类型</span></label>
        <label class="col-sm-9 col-form-label text">
          {{casePropMap['typeId'][model.typeId]}}
        </label>
      </div>
      <div class="form-group row">
        <label class="col-sm-3 col-form-label"><span>优先级</span></label>
        <label class="col-sm-9 col-form-label text">
          {{casePropMap['priorityId'][model.priorityId]}}
        </label>
      </div>
      <div class="form-group row">
        <label class="col-sm-3 col-form-label"><span>耗时(分钟)</span></label>
        <label class="col-sm-9 col-form-label text">
          {{model.estimate}}
        </label>
      </div>

      <div class="form-group row">
        <label class="col-sm-3 col-form-label"><span>测试目的</span></label>
        <label class="col-sm-9 col-form-label text">
          {{model.objective}}
        </label>
      </div>

      <ng-container *ngIf="model.id">
        <div *ngFor="let field of customFields; let i = index;" class="form-group row">
          <label class="col-sm-3 col-form-label"><span>{{field.label}}</span></label>
          <label class="col-sm-9 col-form-label text">
            {{model[field]}}
          </label>
        </div>
      </ng-container>
    </div>

    <div [class.hidden]="tab != 'history'" class="tab-history">
      <div class="activity">
        <div class="list">
          <div *ngFor="let his of model.histories; let i = index;" class="item">
            <div class="descr">
              <span [innerHTML]="his.title" class="content"></span> -
              <span>{{his.createTime | date:'y/MM/dd HH:mm:ss'}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <comment-list [model]="model" [modelType]="'case'"></comment-list>

  </div>

</div>
